{% extends 'subpage/main_base.html' %}
{% block title %}项目列表页{% endblock %}
{% block content %}
    <div class="main-content bgc-grey-100">
        <div class="col-md-12">
            <div class="bgc-white bd bdrs-3 p-20 mT-80">
                <h4 class="c-grey-900 mB-20">
                    Project
                    {% if request.user.is_authenticated() %}
                        {% if "app01.add_project" in perms %}
                            <button type="button" class="btn btn-info pull-right create-project" data-toggle="modal"
                                    data-target="#projectModal" data-whatever="创建项目">
                                <i class="fa fa-plus"></i>
                                创建项目
                            </button>
                        {% endif %}
                    {% endif %}
                </h4>


                {% if projects %}
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>项目标题</th>
                            <th>项目描述</th>
                            <th>项目状态</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for project in projects %}
                            <tr data-line='{"name":"{{ project.name }}","describe":"{{ project.describe }}","status":"{{ project.status }}"}'
                                data-id="{{ project.id }}">
                                <td>{{ project.id }}</td>
                                <td>{{ project.name }}</td>
                                <td>{{ project.describe }}</td>
                                <td>{{ project.status }}</td>
                                <td>
                                    {% if "app01.delete_project" in perms %}
                                        <a href="javascript:;">
                                            <button class="btn btn-danger delete-project" data-target="#deleteModal"
                                                    data-toggle="modal" data-whatever="{{ project.id }}">删除
                                            </button>
                                        </a>
                                    {% endif %}
                                    <a href="project/job/{{ project.id }}">
                                        <button class="btn btn-info">
                                            任务
                                        </button>
                                    </a>
                                    {% if "app01.change_project" in perms %}
                                        <a href="javascript:;">
                                            <button class="btn btn-success edit-project" data-target="#projectModal"
                                                    data-toggle="modal" data-whatever="修改项目">修改
                                            </button>
                                        </a>
                                    {% endif %}
                                </td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <ul class="pagination pull-right">
                        {% if projects.has_previous() %}
                            <li>
                                <a href="?page={{ projects.previous_page_number() }}">
                                    <i class="fa fa-angle-left" aria-hidden="true"></i>
                                </a>
                            </li>
                        {% endif %}
                        {% for page in paginator.page_range %}
                            {{ guess_page(projects.number,page) }}
                        {% endfor %}
                        {% if projects.has_next() %}
                            <li>
                                <a href="?page={{ projects.next_page_number() }}"><i class="fa fa-angle-right"
                                                                                     aria-hidden="true"></i></a>
                            </li>
                        {% endif %}
                        <li>
                            <a href="?page={{ paginator.num_pages }}">
                                <i class="fa fa-angle-double-right" aria-hidden="true"></i>
                            </a>
                        </li>
                    </ul>
                {% else %}
                    <p class="text-center text">
                        暂无项目
                    </p>
                {% endif %}
            </div>

        </div>

    </div>
    <!-- Modal -->
    <div class="modal fade" id="deleteModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">删除项目</h4>
                </div>
                <div class="modal-body">
                    <h4 class="text-danger">
                        您确定要删除此项目吗?
                    </h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary delete-confirm">保存</button>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="projectModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <span style="display: none">{{ csrf_token }}</span>
                            <label for="inputProjectTitle" class="col-xs-2 control-label">项目标题</label>
                            <div class="col-xs-10">
                                <input type="text" class="form-control" id="inputProjectTitle" placeholder="项目标题"
                                       name="name"/>
                                <span class="error-txt error1"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputProjectDesc" class="col-xs-2 control-label">项目描述</label>
                            <div class="col-xs-10">
                                <textarea name="describe" id="inputProjectDesc" cols="3" class="form-control"
                                          name="describe"></textarea>
                                <span class="error-txt error2"></span>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="" class="col-xs-2 control-label">完成状态</label>
                            <div class="col-xs-10">
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="notFinished" value="未完成" name="status"/> 未完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="finished" value="完成"/> 完成
                                </label>
                                <label class="radio-inline">
                                    <input type="radio" name="status" id="paused" value="暂停"/> 暂停
                                </label>
                                <span class="error-txt error3"></span>
                            </div>
                        </div>

                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary save">保存</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(function () {
            window.isEdit = false;
            window.project_id;
            $('.create-project').click(function () {
                isEdit = false;
            });
            $('.edit-project').click(function () {
                isEdit = true;
            });

            $('body').on('click', '.save', function () {
                if (isEdit) {//修改项目
                    var name = $('#inputProjectTitle').val(), describe = $('#inputProjectDesc').val(),
                        status = $(".form-horizontal input[type='radio'][name='status']:checked").val();
                    var data = {
                        'project_id': project_id,
                        'name': name,
                        'describe': describe,
                        'status': status
                    };


                    function success(data) {
                        var response = JSON.parse(data);
                        if (response.code === '0') {//数据提交成功，并且成功存入数据库
                            $('#myModal').modal('hide');
                            window.location.reload();
                        } else {
                            $('.error-txt').html(response.errmsg);
                            console.log(response.errmsg)
                        }
                    }

                    function error(ero) {
                        $.myAlert({'title': '出错提示', 'message': '出错啦'});
                    }

                    ajaxRequest('POST', '{{ url('app01:projectUpdate') }}', data, success, error, '{{ csrf_token }}');
                } else {//创建项目
                    var name = $('#inputProjectTitle').val(), describe = $('#inputProjectDesc').val(),
                        status = $(".form-horizontal input[type='radio'][name='status']:checked").val();
                    if (name.length === 0) {
                        $.myAlert({'title': '出错提示', 'message': '请写项目名称'});
                        return false;
                    }
                    if (describe.length === 0) {
                        $.myAlert({'title': '出错提示', 'message': '请写项目描述'});
                        return false;
                    }
                    if (status.length === 0) {
                        $.myAlert({'title': '出错提示', 'message': '请写项目状态'});
                        return false;
                    }
                    var data = {
                        'name': name,
                        'describe': describe,
                        'status': status
                    };

                    function success(data) {
                        var response = JSON.parse(data);
                        if (response.code === '0') {//数据提交成功，并且成功存入数据库
                            $('#myModal').modal('hide');
                            window.location.reload();
                        } else {
                            $.myAlert({'title': '出错提示', 'meaage': response.errmsg});
                        }
                    }

                    function error(ero) {
                        $.myAlert({'title': '出错提示', 'message': '出错啦'});
                    }

                    ajaxRequest('POST', '{{ url('app01:project') }}', data, success, error, '{{ csrf_token }}');

                }

            });
            $('#projectModal').on('show.bs.modal', function (event) {
                var target = $(event.relatedTarget);
                var title = target.data('whatever');
                var modal = $(this);
                modal.find('.modal-title').text(title);
                if (target.hasClass('edit-project')) {//修改---->对模态框的赋值
                    var data = target.parents('tr').data('line');
                    var dataId = target.parents('tr').data('id');
                    console.log(dataId);
                    project_id = dataId;
                    //渲染modal
                    modal.find('#inputProjectTitle').val(data.name);
                    modal.find('#inputProjectDesc').val(data.describe);
                    modal.find('input[name="status"][value=' + data.status + ']').attr('checked', true);
                }

            });

        });
        //删除项目
        $('#deleteModal').on('show.bs.modal', function (event) {
            var target = $(event.relatedTarget);
            var targetId = target.data('whatever');
            console.log(targetId);
            return $('.delete-confirm').click(function () {
                var data = {"project_id": targetId};

                function success(data) {
                    $("#deleteModal").modal('hide');
                    window.location.reload();
                }

                function error(ero) {
                    $.myAlert({'title': '出错提示', 'message': '出错啦'});
                }

                ajaxRequest('GET', '{{ url("app01:projectDelete") }}', data, success, error, '{{ csrf_token }}');

            });
        });
    </script>
{% endblock %}

{% block loadjs %}
{% endblock %}
